<template>
  <div class="dict-normal">
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s flex-col">
        <div class="field">getLabelByCode</div>
        <div class="value">{{ personUserInfo.gend | getLabelByCodeFilter("SEX")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getCodeByLabel</div>
        <div class="value">{{ personUserInfo.gendLabel | getCodeByLabelFilter("SEX")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getLabelByCodes</div>
        <div class="value">{{ personUserInfo.fruits | getLabelByCodesFilter("FRUITS")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getCodeByLabels</div>
        <div class="value">{{ personUserInfo.fruitsLabel | getCodeByLabelsFilter("FRUITS")}}</div>
      </div>

      <div class="row flex-c-s flex-col">
        <div class="field">getTreeLabelByCode</div>
        <div class="value">{{ personUserInfo.cityCode | getTreeLabelByCodeFilter("CITY")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getTreeLabelByCodes</div>
        <div class="value">{{ personUserInfo.cityCodes | getTreeLabelByCodesFilter("CITY")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getTreeCodeByLabel</div>
        <div class="value">{{ personUserInfo.cityName | getTreeCodeByLabelFilter("CITY")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getTreeLabelByCode</div>
        <div class="value">{{ personUserInfo.cityNames | getTreeCodeByLabelsFilter("CITY")}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "filters-dict-normal",
  data() {
    return {
      personUserInfo: {
        gend: "1",
        gendLabel: "男",
        fruits: "1,2,3,5",
        fruitsLabel: "草莓,西瓜,芒果",
        cityCode: "35062400",
        cityCodes: "35062400,35062401",
        cityName: "漳州市",
        cityNames: "诏安县,金星乡"
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .info-box {
    padding: 0 20px;
    .row {
      width: 100%;
      margin-top: 32px;
      align-items: flex-start;
      .field {
        width: 144px;
        font-size: 16px;
        color: #666666;
        line-height: 18px;
      }
      .value {
        font-size: 16px;
        color: #333333;
        line-height: 18px;
      }
    }
  }

</style>